<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>老师管理</title>
<%@ include file="../common/importLib.jsp" %>
<link rel="stylesheet" type="text/css" href="../common/css/codeDownload.css">
<script type="text/javascript" src="../common/My97DatePicker/WdatePicker.js"></script> 
<script type="text/javascript" src="../common/jquery-cascade/js/jquery.cityselect.js"></script>
<script type="text/javascript">
	/**
	 * 增删改查参数设置
	 */
	tableTitle = "明人员工家人表";
	tableURL = getTimeURL("../maintain/mingrenTeamInfo/queryPage.do");
	toolbarView = 2;
	tableColumns = [[{field:'ck',checkbox:true},
	                {field:'id',title:'id',width:0,rowspan:1},
					{field:'opt',title:'操作',width:100,align:'center', rowspan:1,
						formatter:function(value,rowData,rowIndex){	
							var queryUrl = '../maintain/mingrenTeamInfo/queryById.do?id=' + rowData.id;						
							return "<a title='修改' class='xxl_linkbutton' iconCls='icon-edit' href='javascript:datagridUpdate(\"" + queryUrl + "\")'>修改</a>";
						}
					},	
					{field:'sharingProportion',title:'分成比例',width:70,rowspan:1},
					{field:'userName',title:'姓名',width:100,rowspan:1},
					{field:'recommendCode',title:'推荐号',width:100,rowspan:1},
					{field:'sex',title:'性别',width:70,rowspan:1},
					{field:'mobilePhone',title:'手机号码',width:100,rowspan:1},
					{field:'registerDateString',title:'注册日期',width:150,rowspan:1},
					
					{field:'recommendCod',title:'二维码',width:80,align:'center', rowspan:1,
						formatter:function(value,rowData,rowIndex){
							var para = "";
							if(rowData.recommendCode!=""){
								para = "?para="+rowData.recommendCode;
							}else{
								para = "";
							}
							var codeName = rowData.userName + "_"+rowData.loginCode;
							return "<a class='xxl_linkbutton saveCode' iconCls='icon-download' href='javascript:openDownWindow(\"http://"+ host + phoneWebUrl +"person/fast_register.html"+ para +"\",\""+ codeName  +"\");'>下载</a>";
						}
					},
					{field:'disableFlag',title:'禁用状态',width:80,align:'center', rowspan:1,
						formatter:function(value,rowData,rowIndex){
							if(rowData.disableFlag == 0){
								return "<font color='green'>起用</font>";
							}else{
								return "<font color='red'>禁用</font>";
							}
						}
					}]];
	
	var addWidth = 800; //添加窗口宽度
	var addHeight = 450; //添加窗口高度
	var addTitle = "添加员工"; //添加标题
	var updateWidth = 800; //修改窗口宽度
	var updateHeight = 450; //修改窗口高度
	var updateTitle = "修改员工信息"; //修改标题
	var updateDisableFlagUri = "mingrenTeamInfo/updateDisableFlag.do"; //禁用、起用记录
	var deleteUri = "mingrenTeamInfo/deleteByIds.do"; //删除记录
	
	/**
	 * 初始化添加表单
	 */	
	function initAddForm(){	
		openPicUpload();	
		//ajaxFormValidator("mobilePhone","手机",11,11,"userInfo/mobilePhoneValidate.do");
		baseFormValidator("userName","姓名",2,12);
		$("#datagrid_add :input[type='radio']")[0].checked = true;
		changeRecommendCode("add");
		
	}
	
	/**
	 * 初始化修改表单
	 */
	function initUpdateForm(jsonObject){	
		selectRadio(jsonObject.sex,"datagrid_update");
		$("#userNameUpdate").val(jsonObject.userName);
		$("#idUpdate").val(jsonObject.id);
		$("#mobilePhoneUpdate").val(jsonObject.mobilePhone);
		$("#recommendCodeUpdate").val(jsonObject.recommendCode);
		$("#userIdUpdate").val(jsonObject.userId);
		$("#sharingProportionUpdate").val(jsonObject.sharingProportion);
		
	}
	/**
	 *打开二维码下载窗口
	 */
	function openDownWindow(urlStr,codeName){
		var downPage = '<div class="codeDownload">'+
			  	'<div class="codeDownload-content">'+
			  		'<div id="code_download"></div>'+
			  		'<select id="codeSize" name="codeSize" class="form-control select-box">'+
			  			'<option value="256">256×256分辨率</option>'+
			  			'<option value="512">512×512分辨率</option>'+
			  			'<option value="1024">1024×1024分辨率</option>'+
			  		'</select>'+
			  		'<a id="download_btn" class="btn download-btn">下载</a>'+
			  		'<a id="cancel_btn" class="btn cancel-btn">取消</a>'+
			  	'</div>'+
			 '</div>';
		$("body").append(downPage);
		$("#code_download").qrcode(urlStr);
		$("#code_download>canvas").width(150);
		$("#code_download>canvas").height(150);
		$("#download_btn").on('click',function(){
			var size = $("#codeSize").val();
			saveCode(urlStr,size,size,codeName);
		})
		$("#cancel_btn").on('click',function(){
			$(".codeDownload").remove();
		})
	}
	/**
	 * 二维码下载
	 */
	function saveCode(content,width,height,codeName){
		width = width?width:512;
		height = height?height:512;
		$('#code_download').html("").qrcode({
			render:"canvas",
			width: width,
			height:height,
			correctLevel:0,
			text:content
		});
		$("#code_download>canvas").width(150);
		$("#code_download>canvas").height(150);
		var myCanvas = $("#code_download>canvas")[0];
	    var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=myCode.png");   
	//  window.location=image; // it will save locally
		var a = document.createElement("a");
		codeName = codeName+"_"+new Date().getTime();
		a.download = codeName + ".jpg";
		a.href = image;
		a.click();
		$(".codeDownload").remove();
	}
	/**
	 *	更改推荐码
	 */
	function changeRecommendCode(type){
		$.ajax({
			type : "post",
			url:"userInfo/getRecommendCode.do",
			dataType:"json",
			async:true,
			success:function(data){
				if(data){
					if(type==="add"){
						$("#recommendCode").val(data);
					}else if(type==="update"){
						$("#recommendCodeUpdate").val(data);
					}
				}
			}
		})
	}
	
	
	
	//新增提交方法
	function addFormSubmit(){
		var params = getFormJson($('#add_form'));
		$.ajax({
			  type: 'POST',
			  url: '../maintain/mingrenTeamInfo/add.do',
			  data: params,
			  dataType: 'json',
			  async: false,
			  success: function(data){
				  if(data.err_code ==0){
					  $('#datagrid_add').window('close');
					  $('#datagrid_table').datagrid('reload');
				  }else {
					alert("新增失败！" + data.err_msg);
				  }
			  },
			  error: function(xhr, type){
			    alert('Ajax error!')
			  }
		});
	}
	//更新提交的方法
	function updateFormSubmit(){
		var params = getFormJson($('#update_form'));
		$.ajax({
			  type: 'POST',
			  url: '../maintain/mingrenTeamInfo/edit.do',
			  data: params,
			  dataType: 'json',
			  async: false,
			  success: function(data){
				  if(data.err_code ==0){
					  $('#datagrid_update').window('close');
					  $('#datagrid_table').datagrid('reload');
				  }else {
					alert("更新失败！" + data.err_msg);
				  }
			  },
			  error: function(xhr, type){
			    alert('Ajax error!')
			  }
		});
	}
	//将form中的值转换为键值对。
	function getFormJson(frm) {
	    var o = {};
	    var a = $(frm).serializeArray();
	    $.each(a, function () {
	        if (o[this.name] !== undefined) {
	            if (!o[this.name].push) {
	                o[this.name] = [o[this.name]];
	            }
	            o[this.name].push(this.value || '');
	        } else {
	            o[this.name] = this.value || '';
	        }
	    });

	    return o;
	}
</script>
<script type="text/javascript">
</script>
</head>
<body id="layout" class="easyui-layout">
<div style="background: none repeat scroll 0% 0% #EFEFEF; height:75px; padding: 6px 2px; border-bottom: 1px solid #CCC;"
		region="north"  split="false" title="条件查询">
	<form  id="searchForm" >
	<table>
		<tr>
		    
			<td>员工名称：</td><td><input type="text" name="userName"/> </td>	
			<td>员工手机：</td><td><input type="text" name="mobilePhone"/> </td>												
			<td><a class="easyui-linkbutton" id="search" iconCLs="icon-search"  onclick="searchTable()">搜索</a></td>
			<td><a class="easyui-linkbutton" iconCls="icon-undo" onclick="document.getElementById('searchForm').reset();reload();">清空</a></td>
		</tr>
	</table>
	</form>
	</div>
	<div region="center">
	<!-- datagrid信息表 -->
	<table id="datagrid_table"></table>
	<!-- 添加记录 -->
	<style>
		#datagrid_add,#datagrid_update{
			padding:  10px 20px;
		}
	
		#datagrid_add tr,#datagrid_update tr{
		    height: 30px;
		}
		
	</style>
	<div id="datagrid_add">
		<form id="add_form" action="" method="post">
			<input type ="hidden" id="roleId" name="roleId">
			<table width="630" class="xxl_tb_1">
				<tbody>	
					<tr>
						<td class="xxl_td_2">姓名：</td>
						<td><input type="text" id="userName" name="userName"/></td>
						<td><div id="userNameTip" style="width:250px"></div></td>
					</tr>
					<tr>
						<td class="xxl_td_2">手机号码：</td>
						<td><input type="text" id="mobilePhone" name="mobilePhone" maxlength="11" onchange="validateSubmitOnce=true"/></td>
						<td><div id="mobilePhoneTip" style="width:250px"></div></td>
					</tr>
					<tr>
						<td class="xxl_td_2">个人推荐码：</td>
						<td><input type="text" id="recommendCode" name="recommendCode" readonly="readonly" style="border: none;"/></td>
						<td>
							<a style="font-size:20px" href="javascript:changeRecommendCode('add');" >
							<span class="l-btn-text"><span class="l-btn-empty pagination-load">&nbsp;&nbsp;</span></span>
							<span style="font-size: 14px; position: relative;top: -4px;color: #000;left: -10px;">更换</span>
							</a>
						</td>
					</tr>
					<tr>
						<td class="xxl_td_2">性别：</td>
						<td><input name="sex" type="radio" value="男" class="radio-option"/>男
							<input name="sex" type="radio" value="女" class="radio-option"/>女</td>
						<td></td>
					</tr>
					<tr>
						<td class = "xxl_td_2">分成比例：</td>
						<td>
							<input type="text" id="sharingProportion" name="sharingProportion" class="easyui-numberbox" min="0" precision="2" max="1" />
						</td>
					</tr>
					<tr>
						<td colspan="3" style="text-align: center">					
							<a class="easyui-linkbutton" iconCls="icon-ok" onclick="addFormSubmit()">添加</a>
							<a class="easyui-linkbutton" iconCls="icon-undo" onclick="document.getElementById('add_form').reset()">重置</a>
							<a class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#datagrid_add').window('close');">取消</a>
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</div>
	
	<!-- 修改记录 -->
	<div id="datagrid_update">
		<form id="update_form" action="" method="post">
			<input type="hidden" id="idUpdate" name="id"/>
			<input type ="hidden" id="userIdUpdate" name="userId">
			<table width="630" class="xxl_tb_1">
				<tbody>
					<tr>
						<td class="xxl_td_2">姓名：</td>
						<td><input type="text" id="userNameUpdate" name="userName"/></td>
						<td><div id="userNameUpdateTip" style="width:250px"></div></td>
					</tr>
					<tr>
						<td class="xxl_td_2">手机号码：</td>
						<td ><input id="mobilePhoneUpdate" name="mobilePhone"  maxlength='11' onblur="validateSubmitOnce=true"/></td>
						<td><div id="mobilePhoneUpdateTip" style="width:250px"></div></td>
					</tr>
					<tr>
						<td class="xxl_td_2">个人推荐码：</td>
						<td><input type="text" id="recommendCodeUpdate" readonly="readonly" name="recommendCode" style="border:none"/></td>
					</tr>
					<tr>
						<td class="xxl_td_2">性别：</td>
						<td><input name="sex" type="radio" value="男" class="radio-option"/>男
							<input name="sex" type="radio" value="女" class="radio-option"/>女</td>
						<td></td>
					</tr>
					<tr>
						<td class = "xxl_td_2">分成比例：</td>
						<td>
							<input type="text" id="sharingProportionUpdate" name="sharingProportion" class="easyui-numberbox" min="0" precision="2" max="1" />
						</td>
					</tr>
					<tr>
						<td colspan="3" style="text-align: center">
							<a class="easyui-linkbutton" iconCls="icon-ok" onclick="updateFormSubmit()">修改</a>		
							<a class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#datagrid_update').window('close');">取消</a>
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</div>
	
</body>
</html>